<template>
  <div class="FileManagement  h100" v-loading="loading">
    <div class="PageContent">
      <el-form :model="ruleForm" :inline="true"  label-width="80px" class="PageItem margintop20">
        <el-row :gutter="5" ref="fileSearch" class="fileSearch">
          <el-form-item label="业务编码:" >
            <el-input v-model="ruleForm.businessCode" ></el-input>
          </el-form-item>
          <el-form-item label="逝者姓名:">
            <el-input v-model="ruleForm.deadName" ></el-input>
          </el-form-item>
          <el-form-item label="家属姓名:">
            <el-input v-model="ruleForm.memberName" ></el-input>
          </el-form-item>
          <el-form-item label="承办人/单位:"  label-width="100px">
            <el-input v-model="ruleForm.agentName" ></el-input>
          </el-form-item>
          <el-form-item label="到馆日期:">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.arrivedTimeStart"   format="yyyy-MM-dd" ></el-date-picker>
            -
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.arrivedTimeEnd"   format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="btnRight.btnFileManagementSearch" @click="onSubmit('search')">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain v-if="btnRight.btnFileManagementExport" @click="openExecl">导出Execl</el-button>
          </el-form-item>
        </el-row>
        <el-table
          ref="filetable"
          :data="tableData"
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          :height="tableHeight"
          border>
          <el-table-column sortable align = 'center'  prop="businessCode"  label="业务编码"  width="200">
          </el-table-column>
          <el-table-column
            prop="memberName"
            align = 'center'
            label="家属姓名"
            width="100">
          </el-table-column>
          <el-table-column
            prop="agentName"
            align = 'center'
            label="承办人/单位"
            width="120">
          </el-table-column>
          <el-table-column
            prop="deadName"
            align = 'center'
            label="逝者姓名"
            width="200">
            <template slot-scope="{row,$index}">
              <span  @click="openHome(row.businessCode)">{{row.deadName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="deadGender"
            align = 'center'
            label="性别"
            width="100">
          </el-table-column>
          <el-table-column
            prop="deadAge"
            align = 'center'
            label="年龄"
            width="120">
          </el-table-column>
          <el-table-column
            prop="certificateNo"
            align = 'center'
            label="证件号码"
            width="200">
          </el-table-column>
          <el-table-column
            prop="transportPlace"
            align = 'center'
            label="接尸地点"
            width="200">
          </el-table-column>
          <el-table-column
            prop="cremationNo"
            align = 'center'
            label="火化证号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="realityCharge"
            align = 'center'
            label="实收金额"
            width="150">
          </el-table-column>
          <el-table-column
            prop="benefitCharge"
            align='center'
            label="减免金额"
            width="150">
          </el-table-column>
         <el-table-column
            prop="fullName"
            align = 'center'
            label="洽谈员"
            width="150">
          </el-table-column>
          <el-table-column
            prop="arrivedTime"
            align = 'center'
            label="到馆日期"
            width="150">
          </el-table-column>
        </el-table>
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="pager.total">
          </el-pagination>
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
  import * as Type from '@/api/service'
  import {dataFormatetmd} from '@/utils/index'

  import download from "@/api/download"

    export default {
        name: "FileManagement",
      data(){
        return{
          loading:false,
          tableHeight:0,
          type:[],
          ruleForm: {
            "businessCode": "",
            "deadName": "",
            "memberName": "",
            "agentName": "",
            "arrivedTimeStart": "",
            "arrivedTimeEnd": "",
            "pageSize": 0,        //每页显示记录条数
            "currentPage": 0,     //当前页数
            "exportExcelFlag": 0  //标记
          },
          pager:{
            "pageSize": 20,
            "total": 1,
            "currentPage": 1
          },
          tableData: [],
          //按钮权限
          btnRight: {
            btnFileManagementSearch: true, //查询
            btnFileManagementExport: true,//导出excel
          },
        }
      },
      //载入按钮
      mounted(){
        this.btnRight = this.$route.meta.buttons;
        //遍历属性赋值将true与false字符串转换成布尔型的值
        for (let key of Object.keys(this.btnRight)) {
          this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
        }
        this.onSubmit()
        var that=this
        window.onresize=function() {
          var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
          var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
          that.tableHeight =dom - search - 110
        }
      },
      //注销window.onresize事件
      destroyed(){
        window.onresize = null;
      },
      updated(){
        this.$nextTick(()=>{
          var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
          var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
          this.tableHeight =dom - search - 110
        })
      },
      methods:{
        onSubmit(value){
          this.loading = true
          if (value) {
            this.pager.currentPage = 1;
          }
          var postData = {
            "businessCode": this.ruleForm.businessCode,
            "deadName": this.ruleForm.deadName,
            "memberName": this.ruleForm.memberName,
            "agentName": this.ruleForm.agentName,
            "arrivedTimeStart": dataFormatetmd(new Date(this.ruleForm.arrivedTimeStart)),
            "arrivedTimeEnd": dataFormatetmd(new Date(this.ruleForm.arrivedTimeEnd)),
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            "exportExcelFlag": 0,           //表示显示 1表示导出execl
            "orderField	":"",     //排序字段
            "orderType":""        //排序顺序
          }
          //查询火化档案的接口
          Type['loadCremationArchives'](postData).then(response => {
            const { data }=response;
            if (!data) {
              this.loading = false;
              this.$message('数据读取失败')
              return
            }
            this.tableData = data.list
            this.pager = data.pager
            this.loading = false
            console.log('this.pager:'+JSON.stringify(data.pager))
            //   //数据读取成功
          }).catch(error => {
            this.$message(error)
            this.loading = false
            this.tableData = []
          })
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pager.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
          this.pager.currentPage = currentPage;
          console.log('currentPage:'+currentPage)
          this.onSubmit()
        },
        openExecl(){
          var postData = {
            "businessCode": this.ruleForm.businessCode,
            "deadName": this.ruleForm.deadName,
            "memberName": this.ruleForm.memberName,
            "agentName": this.ruleForm.agentName,
            "arrivedTimeStart": dataFormatetmd(new Date(this.ruleForm.arrivedTimeStart)),
            "arrivedTimeEnd": dataFormatetmd(new Date(this.ruleForm.arrivedTimeEnd)),
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            // "exportExcelFlag": 1,            //0表示显示 1表示导出execl
            "orderField	":"",     //排序字段
            "orderType":""        //排序顺序
          }
          // download.exportExcel("http://localhost:8001/fmis/test/export-excel-file",{title:"title","rowNum":23},"逝者火化档案_"+download.getDateTime()+".xls");
          download.exportExcel(Type['CremationArchivesEXPEXC'],postData,"逝者火化档案_"+download.getDateTime()+".xlsx");
        },//打开逝者档案
        openHome(code){
          //将路由更换为通过name转换，通过path转路由的方式如后面：this.$router.push("/home")
          this.$router.push({ name: 'home.service.home', params: { 'businessCodeParam': code }})
        }
      },



    }
</script>
<style>
  .FileManagement .PageContent .el-input,.FileManagement .PageContent .el-select{
    width: 8vw;
    min-width: 100px;
  }
  .FileManagement .el-dialog__header{
    background-color: cornflowerblue!important;
  }
  .FileManagement .el-dialog__title,.FileManagement .el-dialog__headerbtn .el-dialog__close{
    color:white;
  }
  .FileManagement .el-dialog{
    min-width: 300px!important;
  }
  .FileManagement .el-input,.FileManagement .el-select{
    width: 8vw;
    min-width: 100px;
  }
  .FileManagement .el-textarea__inner{
    width: 40vw;
    min-width: 640px;
  }
  .FileManagement .detail .el-form-item {
    margin-bottom: 5px;
  }
  </style>
<style scoped>

</style>
